<template>
  <div class="login-container">
    <!-- 星空背景层 -->
    <div class="stars"></div>
    <div class="nebula"></div>

    <!-- 主内容容器 -->
    <div class="login-wrapper">
      <!-- 左侧品牌展示区 -->
      <div class="brand-section">
        <div class="brand-content">
          <img src="@/assets/logo.png" class="brand-logo" alt="智慧园区">
          <h1 class="slogan">智慧园区中枢系统</h1>

          <!-- 功能特性列表 -->
          <div class="feature-list">
            <div v-for="(feature, index) in features" :key="index" class="feature-item">
              <el-icon class="feature-icon">
                <component :is="feature.icon" />
              </el-icon>
              <div class="feature-text">
                <h3>{{ feature.title }}</h3>
                <p>{{ feature.desc }}</p>
              </div>
            </div>
          </div>

          <!-- 底部辅助链接 -->
          <div class="footer-links">
            <a href="#">关于我们</a>
            <a href="#">服务条款</a>
            <a href="#">帮助中心</a>
          </div>
        </div>
      </div>

      <!-- 右侧登录表单区 -->
      <div class="login-box">
        <div class="form-container">
          <h2 class="form-title">用户登录</h2>
          <el-form ref="loginFormRef" :model="form" :rules="loginRules" @submit.prevent="handleLogin">
            <el-form-item prop="username">
              <el-input v-model="form.username" placeholder="请输入用户名" prefix-icon="User" class="sci-fi-input" />
            </el-form-item>

            <el-form-item prop="password">
              <el-input v-model="form.password" type="password" placeholder="请输入密码" prefix-icon="Lock" show-password
                class="sci-fi-input" />
            </el-form-item>

            <div class="form-actions">
              <el-checkbox v-model="rememberMe">记住登录</el-checkbox>
              <a href="#" class="forgot-password">忘记密码？</a>
            </div>

            <el-button type="primary" class="login-btn" :loading="loading" native-type="submit">
              立即登录
              <span class="btn-glow"></span>
            </el-button>

            <div class="third-party-login">
              <div class="divider"><span>其他登录方式</span></div>
              <div class="oauth-buttons">
                <el-button class="wechat-login">
                  <el-icon>
                    <Iphone />
                  </el-icon>
                  手机验证
                </el-button>

              </div>
            </div>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useUserStore } from '@/stores'
import { ElMessage } from 'element-plus'
import {
  Monitor,
  DataAnalysis,
  Lock,
  Iphone,
  Platform
} from '@element-plus/icons-vue'
import { addDynamicRoutes } from '@/router'

const userStore = useUserStore()
const router = useRouter()
const route = useRoute()

const form = ref({
  username: '',
  password: ''
})

const loading = ref(false)

const loginRules = {
  username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
  password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
}

const loginFormRef = ref(null)

const handleLogin = async () => {
  try {
    await userStore.login({ username: 'admin', password: '123456' })
    
    // 添加动态路由
    addDynamicRoutes(userStore.role)
    
    // 跳转到主页或重定向路径
    const redirect = route.query.redirect || '/MainLayout'
    console.log(redirect+'123')
    await router.push(redirect)
    
  } catch (err) {
    console.error('登录失败:', err)
  }
}
const features = ref([
  {
    icon: Monitor,
    title: '全域智能监控',
    desc: '2000+物联网设备实时状态监测'
  },
  {
    icon: DataAnalysis,
    title: '数据可视化',
    desc: '多维度数据分析看板'
  },
  {
    icon: Lock,
    title: '安全防护',
    desc: '三级等保认证安全体系'
  }
])
</script>

<style lang="scss" scoped>
.login-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url('@/assets/login-bg.jpg') no-repeat center center/cover;
  min-height: 100vh;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 1;
  }

  .stars {
    position: absolute;
    width: 100%;
    height: 200%;
    background: url('@/assets/stars.png') repeat;
    animation: stars 100s linear infinite;
    opacity: 0.8;
  }

  .nebula {
    position: absolute;
    width: 150%;
    height: 150%;
    background: radial-gradient(circle at 50% 50%,
        rgba(64, 158, 255, 0.1) 0%,
        rgba(0, 0, 0, 0) 70%);
    animation: nebula 30s linear infinite;
  }

  .login-wrapper {
    position: relative;
    z-index: 2;
    width: 85vw;
    max-width: 1440px;
    min-width: auto;
    height: 80vh;
    min-height: 600px;
    display: flex;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 0 50px rgba(64, 158, 255, 0.2);
    margin: auto;
  }

  .brand-section {
    flex: 1 1 55%;
    min-width: 45%;
    display: flex;
    padding: 5%;
    min-height: auto;
    overflow: hidden;
    position: relative;

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.3);
      z-index: 0;
    }

    .brand-content {
      position: relative;
      z-index: 1;
      width: 100%;
      max-width: 600px;
      margin: auto;

      .brand-logo {
        width: clamp(50px, 8vw, 50px);
        height: clamp(50px, 8vw, 50px);
        margin-bottom: 2rem;
        filter: drop-shadow(0 0 15px rgba(64, 158, 255, 0.5));
        display: block;
        margin-left: auto;
        margin-right: auto;
      }

      .slogan {
        color: #00f7ff;
        font-size: clamp(24px, 2.5vw, 36px);
        line-height: 1.3;
        margin-bottom: clamp(2rem, 3vh, 4rem);
        text-shadow: 0 0 15px rgba(0, 247, 255, 0.887);
      }

      .feature-list {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 1.5rem;
        padding: 1rem 0;

        .feature-item {
          display: grid;
          grid-template-columns: auto 1fr;
          gap: 1.5rem;
          align-items: center;
          padding: 1.5rem !important;
          background: rgba(0, 10, 30, 0.8);
          border-radius: 12px;
          border: 1px solid #00f7ff;
          transition: all 0.3s;
          min-height: 100px;

          @media (max-width: 768px) {
            grid-template-columns: 1fr;
            text-align: center;
            padding: 1.2rem !important;
            min-height: auto;

            .feature-icon {
              margin: 0 auto 1rem !important;
            }
          }

          &:hover {
            transform: scale(1.02);
            box-shadow: 0 4px 15px rgba(64, 158, 255, 0.2);
          }

          .feature-icon {
            font-size: clamp(28px, 2.5vw, 36px);
            padding: 12px;
            background: rgba(0, 247, 255, 0.1);
            border-radius: 8px;
            transition: transform 0.3s;
            color: #00f7ff;
          }

          h3 {
            font-size: clamp(16px, 1.5vw, 20px);
            margin-bottom: 0.5rem;
            color: #00f7ff;
          }

          p {
            font-size: clamp(12px, 1.2vw, 14px);
            line-height: 1.5;
            opacity: 0.9;
            color: #00f7ff;
          }
        }
      }

      .footer-links {
        display: flex;
        gap: 20px;
        margin-top: auto;

        a {
          color: rgba(0, 247, 255, 0.6);
          text-decoration: none;
          font-size: 14px;
          transition: color 0.3s;

          &:hover {
            color: #00f7ff;
          }
        }
      }
    }
  }

  .login-box {
    flex: 1 1 45%;
    min-width: 400px;
    padding: 5%;
    display: flex;
    align-items: center;
    background: rgba(0, 0, 0,0.3);
    backdrop-filter: blur(10px);

    .form-container {
      width: 100%;
      max-width: 400px;
      margin: 0 auto;

      .form-title {
        color: #00f7ff;
        font-size: clamp(24px, 2.5vw, 32px);
        text-align: center;
        margin: 0 0 2.5rem 0;
        text-shadow: 0 0 10px rgba(0, 247, 255, 0.5);
      }

      .sci-fi-input {
        :deep(.el-input__inner) {
          height: clamp(45px, 5vh, 60px);
          background: rgba(0, 10, 30, 0.8);
          border: 1px solid #00f7ff;
          color: #00f7ff;
          font-size: clamp(14px, 1.2vw, 16px);
          transition: all 0.3s;

          &:focus {
            border-color: #00f7ff;
            box-shadow: 0 0 10px rgba(0, 247, 255, 0.3);
          }

          &::placeholder {
            color: rgba(0, 247, 255, 0.5);
          }
        }

        :deep(.el-input__prefix) {
          font-size: 18px;
          color: #00f7ff;
        }
      }

      .form-actions {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 20px 0;

        :deep(.el-checkbox) {
          color: rgba(0, 247, 255, 0.7);

          &.is-checked {
            color: #00f7ff;
          }
        }

        .forgot-password {
          color: rgba(0, 247, 255, 0.7);
          text-decoration: none;
          font-size: 14px;

          &:hover {
            color: #00f7ff;
          }
        }
      }

      .login-btn {
        width: 100%;
        height: clamp(45px, 5vh, 60px);
        font-size: clamp(14px, 1.2vw, 16px);
        background: linear-gradient(45deg, rgba(0, 247, 255, 0.8), rgba(0, 247, 255, 0.6));
        border: none;
        position: relative;
        overflow: hidden;
        transition: 0.3s;
        color: #001a3a;

        .btn-glow {
          position: absolute;
          width: 100%;
          height: 100%;
          background: linear-gradient(45deg,
              rgba(255, 255, 255, 0.2) 0%,
              transparent 60%);
          top: 0;
          left: -100%;
          transition: 0.3s;
        }

        &:hover {
          transform: translateY(-2px);
          box-shadow: 0 5px 20px rgba(0, 247, 255, 0.4);

          .btn-glow {
            left: 100%;
          }
        }
      }

      .third-party-login {
        margin-top: 40px;

        .divider {
          display: flex;
          align-items: center;
          color: rgba(0, 247, 255, 0.5);
          margin: 20px 0;

          &::before,
          &::after {
            content: '';
            flex: 1;
            border-bottom: 1px solid rgba(0, 247, 255, 0.2);
          }

          span {
            padding: 0 15px;
            font-size: 12px;
          }
        }

        .oauth-buttons {
          display: grid;
          gap: 15px;

          .el-button {
            width: 100%;
            height: 45px;
            background: rgba(0, 10, 30, 0.8);
            border: 1px solid #00f7ff;
            color: #00f7ff;

            &:hover {
              background: rgba(0, 247, 255, 0.1);
              border-color: #00f7ff;
            }

            .el-icon {
              font-size: 18px;
              margin-right: 10px;
            }
          }
        }
      }
    }
  }
}

@keyframes stars {
  from {
    background-position: 0 0;
  }

  to {
    background-position: 1000px 1000px;
  }
}

@keyframes nebula {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@media screen and (max-width: 1200px) {
  .login-container {
    .login-wrapper {
      width: 95vw;
      height: 90vh;
    }
  }
}

@media screen and (max-width: 768px) {
  .login-container {
    .login-wrapper {
      width: 100vw;
      height: 100vh;
      border-radius: 0;
      flex-direction: column;
    }

    .brand-section,
    .login-box {
      min-width: 100%;
      width: 100%;
    }
  }
}

@media (max-width: 480px) {
  .login-box {
    padding: 20% 5%;

    .form-title {
      font-size: 24px !important;
    }

    .sci-fi-input :deep(.el-input__inner) {
      height: 45px;
      font-size: 14px;
    }

    .login-btn {
      height: 45px;
      font-size: 14px;
    }
  }
}

@media (min-width: 1200px) {
  .feature-list {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }
}

@media (max-width: 992px) {
  .feature-list {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
  }
}
</style>